<template>
  <div :class="classes">
    <slot></slot>
  </div>
</template>
<script>
import { getCurrentInstance } from 'vue';
import { oneOf } from '../../utils/assist';

const prefixCls = 'haloe-btn-group';

export default {
  name: 'ButtonGroup',
  props: {
    size: {
      validator (value) {
        return oneOf(value, ['small', 'middle', 'default']);
      },
      default () {
        const global = getCurrentInstance().appContext.config.globalProperties;
        return !global.$VIEWUI || global.$VIEWUI.size === '' ? 'default' : global.$VIEWUI.size;
      }
    },
    shape: {
      validator (value) {
        return oneOf(value, ['circle', 'circle-outline']);
      }
    },
    vertical: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    classes () {
      return [
        `${prefixCls}`,
        {
          [`${prefixCls}-${this.size}`]: !!this.size,
          [`${prefixCls}-${this.shape}`]: !!this.shape,
          [`${prefixCls}-vertical`]: this.vertical
        }
      ];
    }
  }
};
</script>
